<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="container" >
    <ul id="list">
        <li>大一</li>
        <li id="er">大二</li>
        <li>大三</li>
        <li>大四</li>
        <li>大五</li>
    </ul>
</div>
<button type="button" onclick="addElement()">点击增加元素</button>

<script type="text/javascript">
    function addElement(){
        //增加元素方法：1、创建一个新元素 2、复制一个元素

        //1、创建一个新元素
        let li = document.createElement("li") ;
        console.log( li ) ;
        li.style.backgroundColor = 'red' ;
        li.innerHTML = "我是新添加的元素" ;
        console.log( li  ) ;

        //2、复制一个元素
        let source = document.querySelector("#list") ;
        let target = source.cloneNode( true ) ;
        console.log( target ) ;

        //有新元素后添加到哪里去
        // 父元素.appendChild( 新添加的元素 )
        let ul = document.querySelector("#list");
        //ul.append(li);

        let  refElement=document.querySelector("#er");
        ul.insertBefore(li,refElement);
    }
/*
    新增（插入到哪）
    element.insertBefore(  新建的元素 , 引用元素  )
    element.appendChild( newChild )
    相关使用：

    创建：document.createElement("标记名称");
    复制：document.cloneNode( true | false );

*/
</script>
</body>
</html>